使用javascript/jquery仅在某些元素之后选择文本 [英] Selecting text only following certain elements using javascript/jquery

问题描述

如下面的代码片段所示，我有多个div文本，其中有一个加粗的部分，然后是一个换行符，然后是一段文本.我可以找到()粗体部分，但是如何才能在javascript/jquery粗体部分之后仅获取换行符之后的文本部分?

As shown in the following snippet I have multiple divs of text where there is a bolded portion, then a line break then a piece of text. I can find() the bolded portion but how can I get only the text portions which follow the linebreak after the bolded portions with javascript/jquery?

<div class="thecontent">
any amount of text or html elements before
<b>
    the bolded text
</b>
<br>
the text I need together with the bolded text which can contain other html
elements apart from line breaks and bolded blocks
<br>
<b>
    posibility of more bolded and text couples further in the div
</b>
<br>
and some more text to go with the bolded text
</div>

单个div中可以有多个加粗部分和文本对，所需的文本片段以换行符结尾，另一个加粗部分或div末尾.文本块中可能还有其他html元素，例如<a href>.

There can be multiple bolded portions and text couples in a single div and the pieces of text needed either end with a line break, another bolded portion or the end of the div. There may be other html elements like <a href> in the text blocks.

我可以使用.find('b')获取<b> </b>的内容，并且尝试使用nodeType == 3选择文本节点，但这只能获取所有文本.

I can get the contents of the <b> </b> with .find('b') and I've tried using nodeType == 3 to select the text node but that only gets me all the text.

很遗憾，我无法更改页面的html.有人有解决方案吗?在此先感谢:)

Unfortunately I cannot change the html of the page. Does anyone have the solution? Thanks in advance :)

根据要求，输入将以粗体显示，以换行和其后的文本阻止.我需要紧随其后的文本，直到出现换行符或其他加粗的部分为止.

As requested the input will be bolded blocks a linebreak and the text following them. I need the text following them up until a line break or another bolded portion.

输出将是一个变量中的粗体文本，以及换行符之后但直到下一个换行符或另一变量中的粗体元素之后的文本.

The output would be the bolded text in one variable and the text following after the linebreak but until the next linebreak or bold element in another variable.

因此html示例的输出为:the bolded text + the text I need together with the bolded text which can contain other html elements apart from line breaks and bolded blocks

So output for the html example is: the bolded text + the text I need together with the bolded text which can contain other html elements apart from line breaks and bolded blocks

和posibility of more bolded and text couples further in the div + and some more text to go with the bolded text

推荐答案

我不认为有一种真正简单的方法来获取所有节点并将其分离等，但是可以肯定.由于我不知道您打算如何处理文本，因此我制作了一个简洁的小对象，其中包含应该更易于使用的所有内容，或者您​​可以更改代码来满足您的需求:

i don't think there's a really easy way of getting all the nodes and seperating them etc. but it sure is possible. Since I have no idea what you intend to do with the text, i made a neat little object containing everything that should be easier to work with, or you can change the code to fit your needs:

var elem    = $('.thecontent').get(0).childNodes,
    content = {},
    i = 0;

for (key in elem) {
    var type = elem[key].tagName ? elem[key].tagName : 'text';
    content[i] = {};
    content[i][type] = elem[key].tagName == 'B' ? $(elem[key]).text() : elem[key].nodeValue;
    i++;
}

console.log( content );

FIDDLE

这将返回:

{"0": {"text" : "any amount of text or html elements before"},
 "1": {"B"    : "the bolded text"},
 "2": {"text" : "\n"}, //also returns newlines
 "3": {"BR"   : null},
 "4": {"text" : "the text I need together with the bolded text which can contain other html elements apart from line breaks and bolded blocks"},
 "5": {"BR"   : null},
 "6": {"text" : "\n"},
 "7": {"B"    : " posibility of more bolded and text couples further in the div"},
 "8": {"text" : "\n"},
 "9": {"BR"   : null},
 "10":{"text" : "and some more text to go with the bolded text"},
}

您可以根据行号(以零开头)，标记名，文本内容或您需要的其他内容进行过滤?

You can filter this based on line number (starting with zero), tagnames, text content, or anything else you need ?

这篇关于使用javascript/jquery仅在某些元素之后选择文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！