Как я могу добавить элемент после символа соответствия в jquery?

#javascript #jquery

#javascript #jquery

Вопрос:

Попытка поместить элемент после совпадения второй или более точек в тексте, если он содержит определенное количество символов. Пример:

 <div id="mytext">
This is just a example. I need to find a solution. I will appreciate any help. Thank you. 
</div>

<script>
var chars = 55;

if ($('#mytext').text().length > chars){
//add <br> after first dot found after number of chars specified.
}
</script> 
  

… Результат будет:

 This is just a example. I need to find a solution. I will appreciate any help.<br> 
Thank you.
  

Комментарии:

1. Не делайте этого. Используйте CSS для определения ширины контейнера.

2. Да, я знаю. Но мне нужно использовать jquery для этого .. <br> это просто пример.. Я бы разместил другие элементы, такие как divs и некоторые другие элементы.

Ответ №1:

Вы можете попробовать это

 var chars = 55;
if ($('#mytext').text().length > chars){
  var text = $('#mytext').text();        // div text
  var chars_text = text.substring(0, chars);   // chars text
  var rest = text.replace(chars_text, '').replace(/./g,'. <span>After Dot</span>');  // rest of text and replace dot of rest text with span
  $('#mytext').html(chars_text rest); // apply chars and rest after replace to the div again
}  
 span{
  color: red;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mytext">
This is just a example. I need to find a solution. I will appreciate any help. Thank you. 
</div>  

Примечание: если вам просто нужно заменить следующую точку после символов, вы можете
использовать '.' вместо /./g

Ответ №2:

таким образом: с помощью подстроки JQUERY

     <p>
    this is test string with jquery . test 1  2 3 4 45 5 . test test test
    </p>
    <b></b>


    <script>
    var a = $('p').text();
    var _output = '';
    var _allow_index = 40;
    if (a.length > _allow_index)
    {
      var x = a.split('.');
      for(var i=0; i<x.length; i  )
        { if (_output.length < _allow_index) { _output =x[i] '.'; } }
    }
    else { _output = a; }
    $('b').html(_output   '<br>' a.substr(_output.length,a.length));
    </script>
  

Ответ №3:

Кажется, что это не очень хорошая практика, например, длина может отличаться для локализованных языков. Кроме того, вы предполагаете, что у вас есть обычный текст, а не текст HTML, и длина в обоих случаях разная. Возможно, вы захотите использовать html() вместо text() . Однако вот способ для данного случая:

 var container = $('#mytext');
var length = 55;
var insert = '<br/>';
var text = container.text().trim(); // text() or html()
var dotPosAfterLength = text.indexOf(".", length);
if (dotPosAfterLength != -1) {
    container.html(
        text.substring(0, dotPosAfterLength 1)
         insert
         text.substring(dotPosAfterLength 1)
    );
}
  

Ответ №4:

Вам просто нужно добавить это свойство в CSS.

 <div id="mytext">
This is just a example. I need to find a solution. 
I will appreciate any    help. Thank you. 
</div>
<style>
div#mytext{

word-wrap: break-word;
 }
</style>