Question

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

你有一个带有句子的DIV。
您获得DIV（文本句子）的值。
您将文本拆分为空格“”以获取每个单词。
然后用SPAN和id或类围绕每个单词。
您将围绕它们的所有单词放回DIV。
然后，根据用户交互（或超时事件），您可以根据需要隐藏每个SPAN [text] SPAN。

这是处理此问题的正确方法吗？

Answer 1

我会像你描述的那样完成。事实上，我确实做到了：

<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>

Answer 2

我不确定4＆gt; 6的目的是什么用途？如果您在步骤3中获得了单独的单词，那么您可以保留该数组，并在需要对其执行某些操作时始终可以访问相应的单词。

按照你的方式，当你想要做某事时，你仍然需要弄清楚哪个span / id / class要搞乱。您实际上是以不同的格式为yourlsef创建了同样的问题，

Answer 3

我认为一般的想法是有道理的......

获取div的innerhtml ..将其拆分为“”然后对于值中的每个单词将其放入具有唯一ID的div中...您可以通过制作来保留单词在空间中的相对大小看不见，或者你可以通过制作innerhtml =“”来使句子崩溃。

function divclick(id)
{
    //document.getElementById(id).style.visibility="hidden";
        // OR 
    //document.getElementById(id).innerHTML = "";
}

至于获得div分裂并重新显示为它自己的单词div ...这不应该是一个大交易...唯一的想法你必须考虑的是什么事件导致的话消失或出现。

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

3 个答案: