how can truncate text jquery keep html? tried following code unfortunately doesn't return html formatting.
var truncate = function() { $('p.truncated').text(function(index, oldtext) { if (oldtext.length > 20) { return '...' + oldtext.substr(-25); } return oldtext; }); } if run snippet see seeking.
var truncate = function() { $('p.truncated').text(function(index, oldtext) { if (oldtext.length > 20) { return '...' + oldtext.substr(-25); } return oldtext; }); } truncate(); var truncate2 = function() { $("p.truncated2").each(function() { //var thecontent = $(this).text(); var thecontent = $(this).html(); var n = thecontent.substr(-25); $(this).html( '...' +n ); }); } truncate2();p { margin: 0 0 30px 0; display: block; padding: 5px; } streak { color: green; } double { color: orange; } p span { color: grey; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> how make this... <p class="sheet"> <streak>start</streak> <streak>1</streak> <streak>2</streak> <double>3</double> <double>4</double> <span>5</span> <span>6</span> <streak>7</streak> <streak>8</streak> <double>9</double> <double>10</double> <streak>end</streak> </p> ...becomes jquery? <p> ... <span>6</span> <streak>7</streak> <streak>8</streak> <double>9</double> <double>10</double> <streak>end</streak> </p> <hr />here try jquery return text without html elements. <p class="truncated"> <streak>start</streak> <streak>1</streak> <streak>2</streak> <double>3</double> <double>4</double> <span>5</span> <span>6</span> <streak>7</streak> <streak>8</streak> <double>9</double> <double>10</double> <streak>end</streak> </p> second try <p class="truncated2"> <streak>start</streak> <streak>1</streak> <streak>2</streak> <double>3</double> <double>4</double> <span>5</span> <span>6</span> <streak>7</streak> <streak>8</streak> <double>9</double> <double>10</double> <streak>end</streak> </p> how can keep html elements?
if want keep counting character count, can use range object also. set range want delete , it'll delete nodes well. manipulate text keep html tags.
var truncate = function() { var range_all = document.createrange(); range_all.selectnodecontents(document.getelementsbyclassname('truncated')[0]); if (range_all.endoffset > 20) { range_all.setend(document.getelementsbyclassname('truncated')[0], range_all.endoffset - 12); range_all.deletecontents(); $('p.truncated').html('... ' + $('p.truncated').html()); } } truncate(); var truncate2 = function() { $("p.truncated2").each(function() { //var thecontent = $(this).text(); var thecontent = $(this).html(); var n = thecontent.substr(-25); $(this).html('...' + n); }); } truncate2();p { margin: 0 0 30px 0; display: block; padding: 5px; } streak { color: green; } double { color: orange; } p span { color: grey; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> how make this... <p class="sheet"> <streak>start</streak> <streak>1</streak> <streak>2</streak> <double>3</double> <double>4</double> <span>5</span> <span>6</span> <streak>7</streak> <streak>8</streak> <double>9</double> <double>10</double> <streak>end</streak> </p> ...becomes jquery? <p> ... <span>6</span> <streak>7</streak> <streak>8</streak> <double>9</double> <double>10</double> <streak>end</streak> </p> <hr />if text longer 25 character, select until 12th , delete selection. add '...' @ beginning. <p class="truncated"> <streak>start</streak> <streak>1</streak> <streak>2</streak> <double>3</double> <double>4</double> <span>5</span> <span>6</span> <streak>7</streak> <streak>8</streak> <double>9</double> <double>10</double> <streak>end</streak> </p> second try <p class="truncated2"> <streak>start</streak> <streak>1</streak> <streak>2</streak> <double>3</double> <double>4</double> <span>5</span> <span>6</span> <streak>7</streak> <streak>8</streak> <double>9</double> <double>10</double> <streak>end</streak> </p> how can keep html elements?
Comments
Post a Comment