我正在尝试创建一种实现以下目标的方法:
将字符串(例如:"TEST")植入 HTML 页面的正文中，每隔一定数量的单词(例如 10 个)。由于字数统计必须在元素之间延续，这一事实使这个问题变得复杂。
例如，以下 HTML:
<body>
<h1>My Day at the Park</h1>
<p>I had a great day at the park today.</p>
<p>It was very fun, and I would like to go again soon.</p>
</body>
应该变成:
<body>
<h1>My Day at the Park</h1>
<p>I had a great dayTEST at the park today.</p>
<p>It was very fun, and ITEST would like to go again soon.</p>
</body>
因此，每 10 个单词(“day”和“I”)后插入“TEST”。第一个统计的单词是“My”，最后一个是“soon”。 一个similar question过去曾被问过，尽管这个问题没有解决元素之间连续性的重要问题(正如奥斯卡·林德伯格的评论中提到的)。
我解决此问题的(失败的)方法是通过以下过程:
1. 使用jQuery $('body').text() 获取body中的所有文本。 2. 使用 .split(' ') 创建所有单词的数组。 3. 计算并记录新数组中每 10 个单词:cutoffWords[]。 4. 计算每个截止词在其为截止词(第 10 个词)出现之前出现的次数。 5. 运行$('body').html，并在出现 chop 词时将字符串注入(inject)到 chop 词之后。
如果需要的话，我可以发布实际的代码，该代码很长，但是此方法存在一个固有的缺陷，因为当运行 $('body').html 时，元素内的文本标签也会被计算在内，因此可能会导致字符串的错误放置(或元素标签内的放置)。
作为一名 JavaScript 程序员新手，我已经束手无策，非常感谢任何建议。
最佳答案
我认为 Gerardo BLANCO 之前的回答几乎是完美的。如果你想对真正处理的元素有更多的控制(例如，如果 <script> -标 checkout 现在你的代码中，它也会被计算在内)并且如果你还想支持嵌套元素，以下可能帮助。
var validTypes = ['h1', 'p', 'div', 'span'];
var pos = 10;
var addedText = 'TEST';
var counter = 0;
var splitter = function ($el) {
$el.contents().each(function () {
var $innerEl = $(this);
if (this.nodeType === Node.TEXT_NODE) {
var text = $innerEl.text().trim();
if (text !== '') {
var content = text.replace(/ +/g, ' ').split(' ');
var newText = '';
for (var i = 0; i < content.length; i++) {
newText += ' ' + content[i];
if (++counter === pos) {
newText += addedText;
counter = 0;
}
}
this.nodeValue = newText;
}
} else if (this.nodeType === Node.ELEMENT_NODE &&
validTypes.indexOf(this.tagName.toLowerCase()) > -1) {
splitter($innerEl);
}
})
};
splitter($('body'));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div>
<h1>My Day at the Park</h1>
<script>// do nothing here just ignore me</script>
<p>I had a great day at <span style='color:red'>the</span> park today.</p>
<p>It was very fun, and I would like to go again soon.</p>
</div>
</body>关于javascript - 将字符串植入 html 页面(具有挑战性)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49764809/