[英]Substring text with HTML tags in Javascript
您是否在Javascript中使用HTML标记解析子字符串文本?
例如:
var str = 'Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, consectetur adipiscing elit.'
html_substr(str, 20)
// return Lorem ipsum <a href="#">dolor <strong>si</strong></a>
html_substr(str, 30)
// return Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, co
考虑到用正则表达式解析html是一个坏主意 ,这里有一个解决方案就是这样:)
编辑:只是要清楚:这不是一个有效的解决方案,它是一个练习,对输入字符串作出非常宽松的假设,因此应该采取一些盐。 阅读上面的链接,看看为什么永远不能用正则表达式解析html。
function htmlSubstring(s, n) {
var m, r = /<([^>\s]*)[^>]*>/g,
stack = [],
lasti = 0,
result = '';
//for each tag, while we don't have enough characters
while ((m = r.exec(s)) && n) {
//get the text substring between the last tag and this one
var temp = s.substring(lasti, m.index).substr(0, n);
//append to the result and count the number of characters added
result += temp;
n -= temp.length;
lasti = r.lastIndex;
if (n) {
result += m[0];
if (m[1].indexOf('/') === 0) {
//if this is a closing tag, than pop the stack (does not account for bad html)
stack.pop();
} else if (m[1].lastIndexOf('/') !== m[1].length - 1) {
//if this is not a self closing tag than push it in the stack
stack.push(m[1]);
}
}
}
//add the remainder of the string, if needed (there are no more tags in here)
result += s.substr(lasti, n);
//fix the unclosed tags
while (stack.length) {
result += '</' + stack.pop() + '>';
}
return result;
}
示例: http : //jsfiddle.net/danmana/5mNNU/
注意:对于糟糕的HTML, patrick dw的解决方案可能更安全,但我不确定它处理空白区域的效果如何。
它是单个标签的解决方案
function subStrWithoutBreakingTags(str, start, length) {
var countTags = 0;
var returnString = "";
var writeLetters = 0;
while (!((writeLetters >= length) && (countTags == 0))) {
var letter = str.charAt(start + writeLetters);
if (letter == "<") {
countTags++;
}
if (letter == ">") {
countTags--;
}
returnString += letter;
writeLetters++;
}
return returnString;
}
用法:
var str = 'Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, consectetur adipiscing elit.';
var res1 = html_substr( str, 20 );
var res2 = html_substr( str, 30 );
alert( res1 ); // Lorem ipsum <a href="#">dolor <strong>si</strong></a>
alert( res2 ); // Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, co
示例: http : //jsfiddle.net/2ULbK/4/
功能:
function html_substr( str, count ) {
var div = document.createElement('div');
div.innerHTML = str;
walk( div, track );
function track( el ) {
if( count > 0 ) {
var len = el.data.length;
count -= len;
if( count <= 0 ) {
el.data = el.substringData( 0, el.data.length + count );
}
} else {
el.data = '';
}
}
function walk( el, fn ) {
var node = el.firstChild;
do {
if( node.nodeType === 3 ) {
fn(node);
// Added this >>------------------------------------<<
} else if( node.nodeType === 1 && node.childNodes && node.childNodes[0] ) {
walk( node, fn );
}
} while( node = node.nextSibling );
}
return div.innerHTML;
}
let str = 'Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, consectetur adipiscing elit.'
let plainText = htmlString.replace(/<[^>]+>/g, '');
使用上面给出的正则表达式提取纯文本,然后使用基于JS String的“.substr()”函数来获得所需的结果
Javascript有一个子字符串方法。 如果字符串包含html,则没有区别。
使用类似于= str.replace(/<[^>]*>?/gi, '').substr(0, 20);
我在http://fiddle.jshell.net/xpW9j/1/创建了一个例子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.