使用Javascript隐藏字符串中的单词

我有一个句子，我希望能够通过使用Javascript隐藏单词。例如，隐藏第一个和第六个单词或其他东西。来自PHP的背景，我猜它会是这样的

你有一个DIV，里面有一个句子

得到DIV（文本语句）的值

将文本按空格“”拆分以获得每个单词

然后用SPAN和id或class围绕每个单词

将所有带跨距的单词放回DIV中

然后，通过用户交互（或超时事件），您可以根据需要隐藏每个SPAN[text]SPAN

---

这是正确的处理方法吗？

我不确定步骤4->6的作用是什么？如果您在第3步中获得了单独的单词，那么您可以保留该数组，并在需要使用该数组时始终可以访问相应的单词

---

您仍然需要确定在您想做某事时要处理哪个span/id/类。你基本上是在以不同的形式为你的LSEF制造相同的问题，

我认为总体思路是有意义的是

获取div.的innerhtml。。按“”拆分，然后为值中的每个单词将其放入具有唯一id的div中。。。您可以通过使其不可见来保持单词在空间中的相对大小，也可以通过使innerhtml=“”使句子折叠

---

至于将div拆分并重新显示为自己的单词div。。。那不应该是什么大不了的事。。。你唯一需要考虑的是，是什么事件导致了这些词的消失或出现。

我会完全按照你描述的那样做。事实上，我确实做到了：

<div>
The dog jumps over the log.
</div>
<script type="text/javascript">
function boxWords(textNode) {
    var frag = document.createDocumentFragment(),
        // trim leading and trailing whitespace to avoid empty elements
        words = textNode.nodeValue.replace(/(^\s+)|(\s+$)/g, '').split(' ');

    for(var i = 0, len = words.length; i < len; ++i) {
        frag.appendChild(document.createElement('span').appendChild(
            document.createTextNode(words[i])).parentNode);
        frag.appendChild(document.createTextNode(' '));
    }

    textNode.parentNode.replaceChild(frag, textNode);
}

var div = document.getElementsByTagName('div')[0];
boxWords(div.firstChild);

// underline the 4th word
div.getElementsByTagName('span')[3].style.textDecoration = 'underline';
</script>

狗跳过了圆木。
函数boxWords（textNode）{
var frag=document.createDocumentFragment（），
//修剪前导和尾随空格以避免空元素
words=textNode.nodeValue.replace（/（^\s+）|（\s+$）/g'）。split（“”）；
for（变量i=0，len=words.length；i

隐藏的单词所在的空格是否折叠？还是保留空白？我想保留空格，所以我猜空格会随着每个跨距重新插入到DIV中。对不起，我没有读到你的问题。我希望每个单词占用的空间保持不变，而不是缩小。好吧，就像我说的，如果我想隐藏第一个和第六个单词或其他东西，那么我的猜测是它们必须是DOM对象，可以通过显示“隐藏”：无。当然，但在需要时包装它们，并且在您确切知道需要哪一个时包装它们。不是抓住他们，包装他们，然后仍然面临的问题，找到一个你需要一遍一遍。啊，我想我明白你在说什么-你想考虑的事件之一是有可能点击一个词，并得到效果，是吗？在这种情况下，您的解决方案是好的。嗯，我不确定什么事件会导致文字消失-可能是鼠标单击、超时或加载。我只是想确保我有一些简单的方法来访问隐藏的单词。很好，现在我只需要找出如何在隐藏元素时保留空白；使用style.visibility='hidden'好吧，这会隐藏它，但我需要保留单词占用的空白。

<div>
The dog jumps over the log.
</div>
<script type="text/javascript">
function boxWords(textNode) {
    var frag = document.createDocumentFragment(),
        // trim leading and trailing whitespace to avoid empty elements
        words = textNode.nodeValue.replace(/(^\s+)|(\s+$)/g, '').split(' ');

    for(var i = 0, len = words.length; i < len; ++i) {
        frag.appendChild(document.createElement('span').appendChild(
            document.createTextNode(words[i])).parentNode);
        frag.appendChild(document.createTextNode(' '));
    }

    textNode.parentNode.replaceChild(frag, textNode);
}

var div = document.getElementsByTagName('div')[0];
boxWords(div.firstChild);

// underline the 4th word
div.getElementsByTagName('span')[3].style.textDecoration = 'underline';
</script>