2012-02-23 55 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。

我把這個代碼在谷歌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每一次,艾蘭·圖靈殺死一隻小貓。 – 2012-02-23 18:51:34

+0

不要用正則表達式解析hmtl - 看到這個問題和答案http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags – asawyer 2012-02-23 18:52:14

+0

HTML是不是一個正規的語言,所以_regular_表達式不能很好地工作。你最好用'.html()'''''''來爲你做這種工作。 – robbrit 2012-02-23 18:52:52

回答

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> 
相關問題