9

特定の単語をhtmlに置き換えるreplacewith関数をjQueryで記述しようとしています。

基本的に、ドキュメントが読み込まれる[this]と、のようなものを置き換えようとしています。<span class='myclass'>私はいくつかのサンプルを探しましたが、私が見たいくつかのことはうまくいきませんでした. 私はまだjQueryを学んでいるので、何を試してみるべきか、誰かが私にいくつかの提案をしてくれることを願っています.

前もって感謝します、スティーブン。

HTML/テキスト:

[this]hello world![/this]​

JavaScript:

$(document).ready(function() {    
     // Using just replace
     $("body").text().replace(/[this]/g,'<b>')
});​

- 編集 -

以下の Nir ​​のデモを使用して、関数にいくつかの変更を加えました。私がやっていることについて、もう少し詳しく説明します。私はすでに適切なクラスを持っているインライン部分を作成しようとしています。htmlではうまくいきますが、jQuery関数を実行するとうまくいかないようです。

タグが置き換えられていることは明らかですが、前述のように、私の css は実際には機能していないようです。

HTMLへのリンクはこちら

ここにjsfiddleへのリンクがあります

$(document).ready(function() {    

// Using just replace
var text = $('body').text();
$("body").html(text.replace(/\[math\]/g,'<span class="container">').replace(/\[\/math\]/g,'</span>'));

var textt = $('body').text();
$("body").html(textt.replace(/\[top\]/g,'<div class="containme">').replace(/\[\/top\]/g,'</div>'));

var textl = $('body').text();
$("body").html(textl.replace(/\[line\]/g,'<div class="borderme">&nbsp;</div>'));

var textb = $('body').text();
$("body").html(textb.replace(/\[bot\]/g,'<div class="containme2">').replace(/\[\/bot\]/g,'</div>'));
 });​

このHTML

 <span class="readme">Whats up, here's a fraction.&nbsp;
<span class="container">
    <div class="containme">1</div>
    <div class="borderme">&nbsp;</div>
    <div class="containme2">2</div>
    </span>
 &nbsp;&nbsp;Hello? Whats up, here's a fraction.&nbsp;
    <span class="container">
    <div class="containme">1</div>
    <div class="borderme">&nbsp;</div>
    <div class="containme2">2</div>
  </span>
  &nbsp;&nbsp;Hello? Whats up, here's a fraction.&nbsp;
  </span>

この短縮マークアップに

<span class="readme"> Whats up, here's a fraction. [math][top]1[/top][line][bot]2[/bot][/math] </span>
4

3 に答える 3

8

javascript replace（）は新しい文字列を返しますが、元の文字列は変更されないため、おそらく次のようになります。

$(document).ready(function() {    
    var content = $("body").text().replace(/\[this\]/g,'<b>')
    $("body").html(content);
});​

角かっこはエスケープする必要があることに注意してください。そうしないと、角かっこ内の各文字が。に置き換えられます<b>。

これがフィドルです

于 2012-07-03T21:10:45.787 に答える
2

これが正規表現を使用するデモです：

$(document).ready(function() {    
    // Using just replace
    var text = $('body').text();
    $("body").html(
        text.replace(/\[this\]/g,'<b>').replace(/\[\/this\]/g,'</b>')
    );
});
于 2012-07-03T21:06:50.167 に答える
0

テキストをカスタム HTML 要素に置き換える方法を誰も説明していないので、次の関数を使用します。

replaceWithAnchor: function (el, text) {
        let anch = $('<span>');
        anch.attr('id', `my-link-1`);
        anch.text(text);

        var content = el.html().replace(text, '<span id="need-to-replace"></span>');
        el.html(content);
        el.find('#need-to-replace').replaceWith(anch);
    }
于 2020-04-27T11:28:53.873 に答える