如何在jquery中匹配字符后添加元素？

Question

Trying to place an element after match second or more dots in a text if it has a specific number of characters. Example:

<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> 

... The output would be:

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

Answer 1

You can try this

 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>

Note: if you just need to replace the next one dot after chars you can use '.' instead of /\\./g

Answer 2

this way : With JQUERY Substring

    <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>

Answer 3

Doing that doesn't seem to be a very good practise, for instance length may vary for localised languages. Besides, you're assuming you have a plain text, rather than an HTML text and length is different in both cases. You may want to use html() instead of text(). However here is a way for the given case:

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)
    );
}

Answer 4

You just need to add this property in 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>