如何在javascript中从标签获取文本，修剪并再次粘贴到标签

Question

I would like to trimm text from html tags, and paste result to these tags again. It's not DOM content, only string.

var string = "<div class='someClass'><b>Some very long text</b></div>"

Wanted result is fe:

var string = "<div class='someClass'><b>Some very lon</b></div>"

I found library striptags , but it only gets rid off tags, but I want to keep them.

If you have any solution please let me know :)

UPDATE:

Thanks all of you for advices. There are few things to add from me: 1. I never have information about html tags, because it came from quill text editor, and I need some kind of regex. 2. In my job there is no jQuery, it's kind of 'evil' :P. 3. I'm using react, so any use of 'document' or 'window' is unwanted here :(.

Answer 1

Checkout trim() method of javascript or String.prototype.trim() .

Hope it will work for you!

Answer 2

If it is a string and you want to trim some portion of text. you can use the substring/slice function of javascript.

For more refernce you can refer below links

http://www.w3schools.com/jsref/jsref_substring.asp

http://www.w3schools.com/jsref/jsref_slice_string.asp

Answer 3

If the structure is exact like you showed <div class='someClass'><b>Some very long text</b></div> , you could do it with regex to find the text, and in the function change it how you like, shorten( substr )/ trim /...:

 var longText ="<div class='someClass'><b>Some very long text</b></div>"; const MAX_LENGTH = 13; // regex expression matches the structure given var shortText = longText.replace(/(<div[^>]+><b>)([^<]+)(?=<\\/b><\\/div>)/gi, function(m1,m2,m3){ // m2 matches "<div class='someClass'><b>" // m3 matches "Some very long" return m2 + m3.substr(0, MAX_LENGTH).trim(); }) console.info(shortText) 

Here some documentation to the replace function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

A "cooler" Alternative:
If you pass the HTML Element that should be altered, to this short function checkChildren , all Child-Textnodes will be modified, trim , substr , ... (it is a bit of an overkill, checking every node, if you know the final structure, but i just wanted to test it):

 var elem = document.getElementById("test"); //define the max length of text nodes const MAX_LENGTH = 13; checkChildren(elem); // check all children from parent element an limit the size of textNodes function checkChildren(parent){ for(var i=0; i<parent.childNodes.length;i++){ var child = parent.childNodes[i]; switch(child.nodeType){ case Node.ELEMENT_NODE: // recursive call checkChildren(child); break; case Node.TEXT_NODE: // modify textNode (Shorten and trim) child.nodeValue = child.nodeValue.substr(0,MAX_LENGTH).trim(); break; } } } 

 <div id="test" class='someClass'><b>Some very long text</b></div> 

Answer 4

You could use a hidden tag where you manipulate the string. Something like <div id="tags-modifier" ></div> and then jquery like like

var string = "<div class='someClass'><b>Some very long text</b><b>Test2213213213213</b></div>"
$("#tags-modifier").html(string);
var part= 5;
$.each($('#tags-modifier *:not(:has("*"))'), function(){
    mytext=$(this).html()
    $(this).html(mytext.substring(0, part))
})
string = $("#tags-modifier").html();

This works even if there are multiple siblings

Fiddle here

Answer 5

You can use $.parseHTML to convert this string into dom tree. Get the <b> node from this dom tree and change the text with the help of substr.