>

PHP가 아닌 JavaScript/JQuery를 사용하여 "Price"라는 단어 다음에 텍스트를 감싸고 싶습니다. 나는 다음을 시도했지만 작동하지 않습니다. PHP에서 알고있는 표현을 사용했습니다.

$('h2#Price').text().replace(/(.*?)Price(.*?)/, '$1 Price <span>$2</span>');

span { background-color:yellow }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 id="Price">T-shirt Price in Canada</h2>

"캐나다"를 범위 내에서 포장하고 싶습니다.


  • 답변 # 1

    스팬을 추가하려면 .html을 사용해야합니다

    $('#Price').html(function() {
      return this.innerText.replace(/(.*)Price(.*)/,'$1 Price <span>$2</span>')
    });
    
    
    span { background-color:yellow }
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <h2 id="Price">T-shirt Price in Canada</h2>
    
    

    보다 일반적인-클래스를 추가하면 각 클래스가 한 번에 변경됩니다 :

    $(function() {
      $('.price').html(function() {
        return this.innerText.replace(/(.*)Price(.*)/, '$1 Price <span>$2</span>')
      });
    });
    
    
    #PriceCAD span {
      background-color: yellow
    }
    #PriceMXN span {
      background-color: orange
    }
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <h2 class="price" id="PriceCAD">T-shirt Price in Canada</h2>
    CAD 12
    <h2 class="price" id="PriceMXN">T-shirt Price in Mexico</h2>
    MXN 175
    
    

  • 답변 # 2

    안녕하세요 참조를 위해 아래 코드를 확인하십시오

    $(document).ready(function() {
      var string_to_slipt = $('#Price').html();
      //console.log(string_to_slipt);
      var ret = string_to_slipt.split("Price");
      var str1 = ret[0];
      var str2 = ret[1];
      $('#Price').html(str1 + 'Price <span>' + str2 + '</span>');
    });
    
    
    span {
      color: red;
    }
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <h2 id="Price">T-shirt Price in Canada</h2>
    
    

  • 답변 # 3

    var text = 'Price in 12312412';        
    text = text.replace(/(.*Price)(.+)/, '$1 <span>$2</span>');
    console.log(text);
    
    

  • 답변 # 4

    document.getElementById('price').innerHTML = 'T-shirt Price in <span>Canada</span>';
    
    
    span { background-color:yellow }
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <h2 id="price">T-shirt Price in Canadaa</h2>
    
    

    이 작업을 수행하십시오. 코드에 일부 유형 오류가 발생했을 수 있습니다. 이제 수정했습니다. 당신은 우리에게 당신이 작은 js를 알고 있다고 말했고 그것은 문제가 아닙니다. 기초부터 시작하면 확실히 배울 것입니다. 방금 innerHTML (태그 안의 것)을 변경했습니다. 이것이 도움이 되길 바랍니다!

관련 자료

  • 이전 dynamic data - DynamicData 및 ReactiveUI에서 자동 새로 고침
  • 다음 r - 자체에 대해 열 회귀