Selecting text only after certain elements using javascript / jquery
As shown in the following snippet, I have several sections of text in which the bold part is highlighted, then the line is split into a chunk of text. I can find () the selection, but how can I only get the parts of the text that follow the line after the selection 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>
A single div can have multiple bold bold and text pairs, and the text fragments must end with a line break, another in bold, or the end of a div. Text blocks can have other html elements like <a href>
.
I can get the content <b> </b>
with .find('b')
, and I tried to use nodeType == 3
to select the text node, but it only gets all the text.
Unfortunately, I cannot change the html of the page. Anyone have a solution? Thanks in advance:)
Locked lines and the text following them are shown in bold as requested for input. I want the text following them before a line break or other selection.
The result will be bold text in one variable and text following the line, but before the next line or bold item in another variable.
So the 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
and posibility of more bolded and text couples further in the div
+and some more text to go with the bolded text
source to share
I don't think there is an easy way to get all the nodes and split them, etc., but it 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 modify the code to suit 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 );
This returns:
{"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"},
}
Can you filter this based on line number (starting at zero), tags, text content, or whatever you want?
source to share