適合字とjqueryへのリンクはテキストのみ、リンクhref
-
13-12-2019 - |
質問
を使用していligatures.js 置換テキスト内の自サイトのリガチャの一部の文字の組み合わせとなります。例えば、'fi'に'五'.
この例: http://jsfiddle.net/vinmassaro/GquVy/
ルがありますを選択することができ、出力テキストを見る'fi'を'つになって一つの文字とされているものです。コピーして確かめられまでのリンク先のアドレスに貼り付けることが見えますので、<a href部分に交換されていなどの
/news/here-is-a-url-with-%EF%AC%81ve-ligature
これは意図しないにします。どうしたいので差し替えだけのテキストのリンクがないの<a href部?私た。テキスト)となります。not()のない幸運をもたらした。よろしくお願いします。
解決
と思いますのappropiate jQueryセレクタ
$('h3 a, h3:not(:has(a))')
.ligature('ffi', 'ffi')
.ligature('ffl', 'ffl')
.ligature('ff', 'ff')
.ligature('fi', 'fi')
.ligature('fl', 'fl');
他のヒント
応募の機能の全体を見出しの innerHTML
, のアンカーの href
属性。この仕怒例:
$('h1 a, h2 a, h3 a, h4 a').ligature( //...
今のままだと、作業のリンクの見出しは、なんなのかそれこそます。という音がすることができます 他の 内容の中では、特定の元素( 他の レベルのタグに営巣しい再帰的アプローチ.こちらではのアイデアは基本的には平JavaScript以降、jQueryによって提供されていない方を対象にDOMテキストノードをぶら下げるフィールド
$.fn.ligature = function(str, lig) {
return this.each(function() {
recursiveLigatures(this, lig);
});
function recursiveLigatures(el, lig) {
if(el.childNodes.length) {
for(var i=0, len=el.childNodes.length; i<len; i++) {
if(el.childNodes[i].childNodes.length > 0) {
recursiveLigatures(el.childNodes[i], lig);
} else {
el.childNodes[i].nodeValue = htmlDecode(el.childNodes[i].nodeValue.replace(new RegExp(str, 'g'), lig));
}
}
} else {
el.nodeValue = htmlDecode(el.nodeValue.replace(new RegExp(str, 'g'), lig));
}
}
// http://stackoverflow.com/a/1912522/825789
function htmlDecode(input){
var e = document.createElement('div');
e.innerHTML = input;
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
};
// call this from the document.ready handler
$(function(){
$('h3').ligature('ffi', 'ffi')
.ligature('ffl', 'ffl')
.ligature('ff', 'ff')
.ligature('fi', 'fi')
.ligature('fl', 'fl');
});
るべき内容のようになります:
<h3>
mixed ffi content
<span>this is another tag ffi <span>(and this is nested ffi</span></span>
<a href="/news/here-is-a-url-with-ffi-ligature">Here is a ffi ligature</a>
</h3>
所属していません StackOverflow