0

さて、私が立ち往生している非常に笑顔の質問です。送信時にテキストが関数にスローされ、リンクがあるかどうかを確認する HTML テキスト ボックスを作成しようとしています。リンクがある場合は、アンカー タグで囲み、クリック可能なリンクにします。

それで、その部分が機能するようになりましたが、編集機能を作成しました。そのため、コメントで編集ボタンが押されると、作成されたコメントとともにポップアップが表示されます。コメントの値 (XML ファイルから取得) は、この編集テキスト領域の値に配置されます。しかし、リンクの値にはまだアンカー タグが含まれているため、非常に乱雑に見えます。

このコメントを実行してアンカー タグを削除し、残りのテキストをアンカー タグ内に保持する関数を作成しようとしています。

簡単な例として、ユーザーが 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;
}

私の機能していない関数の中には、実装方法についてはわかりませんが、それをどのように行うべきかについてのコメントがあります。

4

4 に答える 4

2

実際、DOM はリンクをテキストに解析するのに十分スマートなので、これを簡単に使用できます(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 を参照してください。

ただし、上記のブラウザーの互換性についてはわかりません。したがって、関数に適用された RobG のバリエーションを次に示します (jsFiddle へのリンク) 。

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

参考までに: HTML の解析/操作には常にDOMと API を使用する必要があります。正規表現を HTML 解析に使用することは強くお勧めしません。
はい、場合によっては機能する可能性がありますが、属性、要素、その他すべての混乱した DOM が適切に区別されないため、それを制御することはできません。

アップデート：

http://jsfiddle.net/2b8uz/5/こちらが更新版です。

問題は、plaxl が既に指摘したように、getElementsByTagName他のgetElement..ファミリー メンバーが Live オブジェクトである NodeList を返すことです。NodeList 内の要素が変更されると、自動的に更新されます。

here から借用した小さなスニペットを追加しました。これは、変換ループに入る前に NodeList を単純な配列に変換します。

ただし、関数の最初のバージョンが機能する場合は、そのバージョンを使用すると、2 回ループするよりもはるかに高速になるはずです。

于 2013-04-03T04:03:34.573 に答える
1

これでうまくいくはずですが、もっと効率的な方法があるかもしれません。パフォーマンスをテストしたところ、受け入れられているソリューションよりもはるかに高速に見えますが、信頼性は低いと思います. ここにテストがありますhttp://jsperf.com/replace-links

 function convertLinkEdit(text) {
    var rx = /<a [^>]*?href="([^"]+)"[^>]*>[^<]*<\/a>/g;

    convertLinkEdit = function (text) {
        return text.replace(rx, '$1');
    };

    return convertLinkEdit(text);

}
于 2013-04-03T03:26:31.037 に答える
0

を見つけるために正規表現を使用できますhref。あなたの言葉はhref="someurl">

var res = word.match(/^href="(.+)">/;
if (res && res.length == 2) 
{
     //res[1] will be your url, do whatever you want with it
}

前に述べたようにリンクが作成され、href 属性が引用符"の代わりにあると仮定します。'

于 2013-04-03T04:03:15.593 に答える
0

リンクを探してから、リンク要素をそのコンテンツのテキスト ノードに置き換えることを検討してください。以下は、ページ内のすべてのリンクをそのコンテンツに置き換えます。

windowonload = function() {

  var links = document.links;
  var link, node;
  var i = links.length;

  while (i--) {
    link = links[i];
    node = document.createTextNode(link.textContent || link.innerText);
    link.parentNode.replaceChild(node, link);
  }
};
于 2013-04-03T03:21:25.533 に答える