jQuery ค้นหาและแทนที่สตริง


86

ฉันมีข้อความเฉพาะในเว็บไซต์สมมติว่า "lollypops" และฉันต้องการแทนที่สตริงนี้ทั้งหมดด้วย "marshmellows" ปัญหาคือไม่รู้ว่าข้อความอยู่ตรงไหน ฉันรู้ว่าฉันสามารถทำสิ่งต่างๆเช่น:

$(body).html($(body).html().replace('lollypops', 'marshmellows'));

สิ่งนี้อาจใช้ได้ แต่ฉันต้องเขียน HTML ใหม่ให้น้อยที่สุดเท่าที่จะทำได้ดังนั้นฉันคิดว่า:

  1. ค้นหาสตริง
  2. ค้นหาองค์ประกอบหลักที่ใกล้เคียงที่สุด
  3. เขียนเฉพาะองค์ประกอบหลักที่ใกล้เคียงที่สุด
  4. แทนที่สิ่งนี้แม้ในแอตทริบิวต์ แต่ไม่ใช่ทั้งหมดเช่นแทนที่ในclassแต่ไม่ใช่ในsrc

ตัวอย่างเช่นฉันจะมีโครงสร้างแบบนี้

<body>
    <div>
        <div>
            <p>
               <h1>
                 <a>lollypops</a>
               </h1>
            </p>
            <span>lollypops</span>
        </div>
    </div>
    <p>
       <span class="lollypops">Hello, World!</span>
       <img src="/lollypops.jpg" alt="Cool image" />
    </p>
<body>

ในตัวอย่างนี้ทุกครั้งที่เกิด "lollypops" จะถูกแทนที่โดย<img src="...จะยังคงเหมือนเดิมและองค์ประกอบเดียวที่จะถูกปรับแต่งจริงจะเป็น<a>และทั้งสอง<span>อย่าง
มีใครรู้วิธีทำบ้างไหม?


มีปลั๊กอินที่เขียนได้ดีเยี่ยมสำหรับการแทนที่ข้อความ jQuery-ReplaceText ปลั๊กอิน ปลั๊กอินจะแทนที่ข้อความโดยปล่อยให้แท็กและแอตทริบิวต์ทั้งหมดไม่ถูกแตะต้อง คุณยังสามารถดูบทช่วยสอนที่ดีสำหรับปลั๊กอินนี้ได้ที่spotlight-jquery-replacetext
Hussein

คำตอบ:


156

คุณสามารถทำสิ่งนี้:

$("span, p").each(function() {
    var text = $(this).text();
    text = text.replace("lollypops", "marshmellows");
    $(this).text(text);
});

จะเป็นการดีกว่าหากทำเครื่องหมายแท็กทั้งหมดด้วยข้อความที่ต้องตรวจสอบด้วยชื่อคลาสที่เหมาะสม

นอกจากนี้อาจมีปัญหาด้านประสิทธิภาพ jQuery หรือ javascript โดยทั่วไปไม่เหมาะสำหรับการดำเนินการประเภทนี้ คุณทำได้ดีกว่าการทำฝั่งเซิร์ฟเวอร์


ฉันรู้ว่าน่าเสียดายที่ฉันไม่สามารถทำได้ในฝั่งเซิร์ฟเวอร์ นอกจากนี้วิธีแก้ปัญหาที่คุณแนะนำไม่เหมาะสำหรับฉันเนื่องจากฉันไม่รู้ว่าสตริงจะอยู่ตรงไหน มันอาจจะเข้า<span>ก็อาจจะเข้ามาเรื่อย<h4>ๆ ...
cypher

จากนั้นคุณสามารถลอง $ ("*") แต่ฉันไม่แนะนำ
kgiannakakis

14

คุณสามารถทำบางสิ่งได้ด้วยวิธีนี้:

$(document.body).find('*').each(function() {
    if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
        $(this).removeClass('lollypops');
        $(this).addClass('marshmellows');
    }
    var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
    var text = $(this).text(); //getting just current node text
    text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
    $(this).text(text); //setting text
    $(this).append(tmp); //re-append 'foundlings'
});

ตัวอย่าง: http://jsfiddle.net/steweb/MhQZD/


7

ด้านล่างนี้คือรหัสที่ฉันใช้แทนข้อความบางส่วนด้วยข้อความสี ง่ายๆคือเอาข้อความและแทนที่ภายในHTMLแท็ก ใช้ได้กับแต่ละคำในแท็กคลาสนั้น ๆ

$('.hightlight').each(function(){
    //highlight_words('going', this);
    var high = 'going';
    high = high.replace(/\W/g, '');
    var str = high.split(" ");
    var text = $(this).text();
    text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
    $(this).html(text);
});

2
var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);

1
ฉันคิดว่าจำเป็นต้องลบเครื่องหมายคำพูดรอบตัวแปรสตริงในฟังก์ชัน 'แทนที่'
Jason Glisson

0

คุณสามารถทำสิ่งนี้:

HTML

<div class="element">
   <span>Hi, I am Murtaza</span>
</div>


jQuery

$(".element span").text(function(index, text) { 
    return text.replace('am', 'am not'); 
});

-3

ทำไมคุณไม่เพิ่มคลาสลงในคอนเทนเนอร์สตริงแล้วแทนที่ข้อความด้านใน เช่นเดียวกับในตัวอย่างนี้

HTML:

<div>
    <div>
        <p>
           <h1>
             <a class="swapText">lollipops</a>
           </h1>
        </p>
        <span class="swapText">lollipops</span>
    </div>
</div>
<p>
   <span class="lollipops">Hello, World!</span>
   <img src="/lollipops.jpg" alt="Cool image" />
</p>

jQuery:

$(document).ready(function() {
    $('.swapText').text("marshmallows");
});

2
นี่เป็นคำถามอายุ 4 ขวบและได้รับคำตอบแล้ว แต่ปัญหาคือฉันไม่สามารถทำตามที่คุณแนะนำได้
cypher

คำตอบนี้ไม่สนใจข้อกำหนดของ OP โดยสิ้นเชิง: "ฉันต้องการแทนที่การเกิดขึ้นทั้งหมดของสตริงนี้ ... ปัญหาคือฉันไม่รู้ว่าข้อความนั้นอยู่ตรงไหน"
ลุ
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.