Substring text with HTML tags in Javascript(Javascript中带有HTML标签的子字符串文本)
问题描述
您有解决方案在 Javascript 中使用 HTML 标记对文本进行子字符串处理吗?
Do you have solution to substring text with HTML tags in Javascript?
例如:
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 是个坏主意,这是一个解决方案:)
Taking into consideration that parsing html with regex is a bad idea, here is a solution that does just that :)
要明确一点:这不是一个有效的解决方案,它的目的是对输入字符串做出非常宽松的假设,因此应该谨慎对待.阅读上面的链接,看看为什么永远无法使用正则表达式解析 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/
注意:patrick dw 的解决方案可能是对坏 html 更安全,但我不确定它处理空格的效果如何.
Note: patrick dw's solution may be safer regarding bad html, but I'm not sure how well it handles white spaces.
这篇关于Javascript中带有HTML标签的子字符串文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:Javascript中带有HTML标签的子字符串文本
基础教程推荐
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01