javascript - 在空格处分割句子并查找单词

Question

好吧，这是一个让我困惑的微笑问题。我正在尝试制作一个 HTML 文本框，提交后，文本将被放入函数中并检查是否有任何链接。如果有链接，则将其包裹在 anchor 标记中并制成可点击的链接。

所以我让这部分工作了，但随后我创建了一个编辑功能。因此，当在评论上按下编辑按钮时，会显示一个弹出窗口，其中包含创建的评论。注释的值(取自 XML 文件)被放置到此编辑文本区域的值中。但链接的值仍然带有 anchor 标记，因此看起来极其困惑。

我正在尝试创建一个函数来运行此评论并删除所有 anchor 标记，并且仅在 anchor 标记内保留剩余的文本。

简单的示例，当用户使用 www.stackoverflow.com 等链接发表评论时，它将保存在我的 XML 文档中，如下所示:

<a href="www.stackoverflow.com">www.stackoverflow.com</a>

如果用户发布以 http://开头的链接，它也适用。

我现在正尝试将链接恢复为正常文本，就像以前一样。

这是我的两个功能。第一个 convertLink 工作得很好。 convertLinkEdit 正在尝试恢复该过程，但我没有运气。

function convertLink(text) {
  var words = text.split(' ');
  var newText = '';

  for (var i = 0; i < words.length; i++) {
    var word = words[i];
    if (word.indexOf('http://') === 0) {
      word = '<a href=" ' + word + ' ">' + word + '</a>';
    } else if (word.indexOf('www.') === 0) {
      word = '<a href=" http://' + word + '" >' + word + '</a>';
    }

    newText += word + ' ';
  }

  return newText;
}

function convertLinkEdit(text) {
  var words = text.split(' ');
  var newText = '';

  for (var i = 0; i < words.length; i++) {
    var word = words[i];
    if (word.indexOf('href=') === 0) {
      //if index of finds "href=", it means a link is coming up
      //Therefore, since everything is split at blank spaces,
      //after the next blank space will be the current text that needs saving
    }

    newText += word + ' ';
  }

  return newText;
}

在我的非工作函数中，有关于我认为应该如何完成它的评论，尽管我不确定如何实现。

Answer 1

实际上，DOM 足够智能，可以为您将链接解析为文本，因此您只需使用 this (link to jsFiddle) 即可。 :

function convertLinkEdit(text) {
    // simply create an empty <p> element
    var dummy = document.createElement('p');
    
    // change it's HTML contents to the comment one
    dummy.innerHTML = text;

    // return the TEXT value of our <p>
    return dummy.textContent || dummy.innerText; // we first look up textContent* (newer browsers) and fall back to innerText (older browsers) if needed
}

* 有关 textContent 的信息请查看此处:https://developer.mozilla.org/en-US/docs/DOM/Node.textContent

我不知道上述浏览器的兼容性，所以，here is (link to jsFiddle) RobG 的变体应用于您的函数:

function convertLinkEdit(text) {
    var dummy = document.createElement('p');
    dummy.innerHTML = text;
    
    var links = dummy.getElementsByTagName('a');
    
    for (var i = 0, l = links.length; i < l; i++)
    {
        var link = links[i];
        var node = document.createTextNode(link.textContent || link.innerText);
        link.parentNode.replaceChild(node, link);
    }
    
    return dummy.textContent || dummy.innerText;
}

仅供引用:您应该始终使用 DOM它是用于解析/操作 HTML 的 API。强烈建议不要将正则表达式用于 HTML 解析。
是的，它在某些情况下可能有效，但你无法控制它，因为它无法正确区分属性、元素和 DOM 带来的所有其他困惑。

更新:

http://jsfiddle.net/2b8uz/5/这是更新版本。

问题在于，正如 plaxl 已经指出的那样，getElementsByTagName 和任何其他 getElement.. 系列成员将返回一个作为 Live 对象的 NodeList。一旦 NodeList 中的元素发生更改，它就会自动更新。

我添加了一个小片段borrowed from here ，在进入转换循环之前会将 NodeList 转换为简单数组。

尽管如此，如果该函数的第一个版本适合您，请使用该版本，它应该比循环两次以上快得多。