javascript使用標籤包裹字串程式碼例項

antzone發表於2017-04-09
JavaScript字串

本章節分享一段程式碼例項，它實現了對指定字元使用特定標籤包裹的功能。

下面就給給出此程式碼，並進行以下詳細的分析。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.softwhy {
  color:red;
}
</style>
<script>
function wrap(tag) {
  var stag = '<' + tag + '>';
  var etag = '</' + tag.replace(/\s.*/, '') + '>';
  return function (x) {
    return stag + x + etag;
  }
}
window.onload = function () {
  var odiv = document.getElementById("antzone");
  var done = wrap("span class='softwhy'");
  odiv.innerHTML = done("softwhy.com");
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）function wrap(tag) {}，此函式實現了包裹功能，引數是一個字串，比如span或者帶有其他屬性設定。

（2）.var stag = '<' + tag + '>'，將標籤名稱包裹起來，比如span包裹成<span>。

（3）.var etag = '</' + tag.replace(/\s.*/, '') + '>'，此程式碼的功能就是去掉類似 class='softwhy'這樣的東西。

（4）.return function (x) {

  return stag + x + etag;

},返回一個函式，此函式會接受真正的字串內容，並返回組合後的html字串。

二.相關閱讀:

（1）.replace()方法可以參閱正規表示式replace()函式一章節。

（2）.innerHTML可以參閱js innerHTML一章節。

相關文章