新着ブログ記事を外部サイトに文字数制限で掲載(もっといい方法ないでしょうか)

Question

**目的：**RSSを使ってブログの新着記事を本文冒頭７０字のみ自分のサイトに表示させる

単純に冒頭７０字のみを表示したいのですが、
本文<description>には下記のように記事のインラインスタイルも含まれています。

<description>
　<div style="text-align: left;">こんにちは。・・・</div>
</description>

もちろん記事を装飾するほど増えますので
substr(0,70)にしても、コード数を引いた本文２０字しか表示されない投稿も

試したこと：
<description>取得　→　全角のみ取得（match()）→　
配列を文字列に(join())　→　文字数制限（substr()）

これで何とか出たのですが、こんな方法でいいのでしょうか。
今後のためにももっと効率的な方法あれば、ご教授いただければと思います。

よろしくお願いいたします。

以下js全文です。

$(function() {
	$.ajax({
		url: 'rss.php',  //PHP name
		xmlType: 'xml',
		success: function(xml) {
			var row = 0;
			var data = [];
			var nodeName;
			var output = $('#rss');   //HTML element

			output.wrapInner('<ul></ul>');
			$(xml).find("item").each(function() {
				var title = $("title", this).text();
				var date = new Date($("pubDate", this).text());
				var datestr = date.getFullYear()+"."+ (date.getMonth() + 1) + "." + date.getDate();
				var link =  $("link", this).text();

				//　▼　ここから本文　▼
				var desc = $("description",this).text();
				var fullwidth = desc.match(/[^ -~｡-ﾟ]/g);　//全角のみ取得
				var description = fullwidth.join('');　　//配列を文字列に

				// 頭７０字のみ表示
				if(description.length>=70){
					description = description.substr(0,70)+'...'
				}
				//出力
				output.find('ul').append('<li><a href="' + link + '">' + "<span class=date>" + datestr + "</span>" + "</br>" + " " +  title + '</a>' + "</br>" +  description +  '</li>');

			});

追記：match()とjoin()をinnerHTMLで処理する

$(function() {
	$.ajax({
		url: 'rss.php',  //PHP name
		xmlType: 'xml',
		success: function(xml) {
			var row = 0;
			var data = [];
			var nodeName;
			var output = $('#rss');   //HTML element



			output.wrapInner('<ul></ul>');
			$(xml).find("item").each(function() {
				var title = $("title", this).text();
				// var date = new Date($("dc\:date", this).text());
				var date = new Date($("pubDate", this).text());
				var datestr = date.getFullYear()+"."+ (date.getMonth() + 1) + "." + date.getDate();
				var link =  $("link", this).text();
				var description = $("description",this).text();
				// var fullwidth = desc.match(/[^ -~｡-ﾟ]/g);  //全角文字取得
				// var description = fullwidth.join('');　　　//配列を文字列に

				// dom構造を取り出す
				const testDom = document.createElement('div')
				testDom.innerHTML = description
				console.log(testDom);
				var descriptionText = testDom.innerText　　//constだと文字制限でエラー
				//
				// console.log(title);
				// console.log(date.getFullYear()+"年"+ (date.getMonth() + 1) + "月" + date.getDate() + "日");
				// console.log(link);
				// console.log(desc);
				// console.log(fullwidth);
				// console.log(description);

				// 文字制限
				if(descriptionText.length>=70){
					descriptionText = descriptionText.substr(0,70)+'...'
				}
				output.find('ul').append('<li><a href="' + link + '">' + "<span class=date>" + datestr + "</span>" + "</br>" + " " +  title + '</a>' + "</br>" +  descriptionText +  '</li>');

			});

Comments

[miyabi-sun]

外部サイトとありますが、
ブログも閲覧したいサイトも質問者さんがハンドリング出来るサービスでしょうか？

というのも、Ajaxの条件の一つに同じドメインのサイト、もしくはCORSで許可されているサイトでなければAjax通信を許さないというルールが存在し、無視しようとしてもChromeやFirefoxのブラウザレベルで挙動が停止します。
概要はこちらのサイトを確認してくださいね。
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

もしブログの方で色々質問者さんの権限で設定をいじれるならCORSを上手く設定してやれば実現出来るようになりますので、「CORS 設定」などのワードで検索してみてください。

[nana_ton]

回答ありがとうございます。
ブログはbloggerというgoogle提供のものを利用しております。
やはりドメインが別だと問題が出る可能性があるのですね。。。
調べたところbloggerは独自ドメインは利用できるようですが、
規約などあるのでしっかりチェックしておきます。CORSも勉強しておきます！
ご意見ありがとうございます。

Answer 1

タグの取るなら 一度innerHTMLに入れると取り出せます。

// dom構造を取り出す
const testDom = document.createElement('div')
testDom.innerHTML = description
const descriptionText = testDom.innerText

Comments

[nana_ton]

回答ありがとうございます。
なるほど、そういった方法があるんですね！
ありがとうございます！

[nana_ton]

ちなみにですが、記載してくださった様に記入し
表示文字制限もdescriptionText.substr(0,70)というように書き換えると
そこにAssignment to constant variableとエラーが出ました。
定義をvarにするといけましたが、スコープの問題とかでしょうか、、
追記で変更したコード載せています。

[wilf]

確認ありがとうございます。
うまくいったようでよかったです！
constの値を上書きするとエラーになるのと、GASの場合はES2015に対応していないのでvarを使ってください。
（使えないこと忘れてました

[nana_ton]

かしこまりました。
重ね重ねありがとうございました！