2012-02-23 4 views
-1

中国語の文字と数字(または文字)の間に、<tag></tag>の間にだけスペースを挿入します。(正規表現)は、<tag>と</tag>の間のテキストのみを置き換えますか?


EX1:

生の文字列:

<a href="http://example.com/漢字1234.html">it's a Chinese character漢字1234</a>

期待される結果:

<a href="http://example.com/漢字1234.html">it's a Chinese character 漢字 12345</a>


EX2:

より複雑な生の文字列:

<div id="foo"> 
    <div class="bar1"> 
     <span>abcd漢字1234</span> 
    </div> 
    <div class="bar2"> 
     123漢字abcd 
     <p>letters漢字<a href="http://example.com/漢字1234.html">42漢字answer</a></p> 
    </div> 
</div> 

期待される結果:ここ

<div id="foo"> 
    <div class="bar1"> 
     <span>abcd 漢字 1234</span> 
    </div> 
    <div class="bar2"> 
     123 漢字 abcd 
     <p>letters 漢字<a href="http://example.com/漢字1234.html">answer 漢字 42</a></p> 
    </div> 
</div> 


は、私はJavaSciptに何をすべきかです:

function insert_space(text) { 
    // I use [\u4E00-\u9FA5] to match Chinese characte 
    text = text.replace(/([\u4E00-\u9FA5])([a-z0-9])/ig, '$1 $2'); 

    text = text.replace(/([a-z0-9])([\u4E00-\u9FA5])/ig, '$1 $2'); 

    return text; 
} 

function replaceEntry() { 
    var target_tags = ['div', 'p', 'li', 'td', 'span', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']; 
    var body_tag = $('body'); 
    var raw_text; 
    var format_text; 

    for (var i = 0; i < target_tags.length; i++) { 
     var target_tag = target_tags[i]; 

     $(target_tag, body_tag).each(function() { 
      var has_children = false; 

      console.log('\n'); 
      console.log(target_tag + ' begin'); 

      raw_text = $(this).html(); 

      console.log(raw_text); 

      format_text = insert_space(raw_text); 

      $(this).html(format_text); 

      console.log(target_tag + ' end'); 
      console.log('\n'); 
     }); 
    } 
} 

replaceEntry(); 

しかし、このコードでは上記の2つの例を処理できません。

私は賛成が必要です。本当にありがとう。


PS。

は、私は次のように、Google Chromeの拡張にこのコードを配置:

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(tab.id, {file: 'js/libs/jquery-1.7.1.min.js'}); 
    chrome.tabs.executeScript(tab.id, {file: 'js/auto_spacing.js'}); 
}); 



UPDATE:私は解決策見つけ

:使用してXML XPathを

var current_documant = window.document; 

var xpath_query = '//text()[normalize-space(.)][translate(name(..),"ABCDEFGHIJKLMNOPQRSTUVWXYZ","abcdefghijklmnopqrstuvwxyz")!="script"][translate(name(..),"ABCDEFGHIJKLMNOPQRSTUVWXYZ","abcdefghijklmnopqrstuvwxyz")!="style"]'; 

var nodes = current_documant.evaluate(xpath_query, current_documant, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 

var nodes_length = nodes.snapshotLength; 

for (var i = 0; i < nodes_length; ++i) { 
    var current_node = nodes.snapshotItem(i); 

    // http://www.w3school.com.cn/xmldom/dom_text.asp 
    current_node.data = insert_space(current_node.data); 
} 
+9

あなたには、いくつかのhtmlはRegexたびに、アラン・チューリングは子猫を殺します。 –

+0

正規表現でhmtlを解析しないでください - この質問と回答をご覧くださいhttp://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags – asawyer

+0

HTMLは通常の言語ではありませんので、_regular_式はうまくいきません。この種の作業を行うには、 '.html()'を使ってjQueryのようなライブラリを使うのが良いでしょう。 – robbrit

答えて

1
function doReplace(str) { 
    var rchinese = /([\u4E00-\u9FA5]+)/g; 

    var root = document.createElement("div"); 
    root.innerHTML = str; 

    ['div', 'p', 'li', 'td', 'span', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(tagName) { 
     [].forEach.call(root.getElementsByTagName(tagName), function(elem) { 
      [].forEach.call(elem.childNodes, function(node) { 
       if(node.nodeType === 3) { 
        node.nodeValue = node.nodeValue.replace(rchinese, " $1 "); 
       } 
      }); 
     }); 
    }); 

    return root.innerHTML; 
} 

結果:

var test = '<a href="http://example.com/漢字1234.html">it\'s a Chinese character漢字1234</a>'; 
doReplace(test); 
//<a href="http://example.com/漢字1234.html">it's a Chinese character 漢字 1234</a> 
関連する問題